<template>
	<view class="festivals-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<uni-icons type="back" size="20" color="#333" @click="goBack"></uni-icons>
				<text class="header-title">在线追思</text>
			</view>
			<view class="header-right">
				<text class="edit-btn">编辑</text>
				<uni-icons type="more-filled" size="20" color="#333"></uni-icons>
			</view>
		</view>

		<!-- 分类导航栏 -->
		<view class="category-tabs">
			<view v-for="(tab, index) in categoryTabs" :key="index" class="tab-item" :class="{ active: activeTab === index }" @click="switchTab(index)">
				<text>{{ tab }}</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 鲜花选择区域 -->
			<view class="flower-section">
				<view class="section-title">给爱女刘丹献花</view>

				<!-- 子分类 -->
				<view class="sub-categories">
					<view v-for="(subCat, index) in subCategories" :key="index" class="sub-cat-item" :class="{ active: activeSubCat === index }" @click="switchSubCat(index)">
						<text>{{ subCat }}</text>
					</view>
				</view>

				<!-- 鲜花商品网格 -->
				<view class="flower-grid">
					<view v-for="(flower, index) in flowerList" :key="index" class="flower-item" @click="selectFlower(flower)">
						<image class="flower-image" :src="flower.image" mode="aspectFill"></image>
						<text class="flower-name">{{ flower.name }}</text>
					</view>
				</view>
			</view>

			<!-- 升级专用区域 -->
			<view class="upgrade-section">
				<view class="section-title">升级信专用:</view>
				<view class="upgrade-grid">
					<view v-for="(item, index) in upgradeItems" :key="index" class="upgrade-item" @click="selectUpgrade(item)">
						<image class="upgrade-image" :src="item.image" mode="aspectFill"></image>
						<text class="upgrade-name">{{ item.name }}</text>
					</view>
				</view>
				<view class="upgrade-tip">
					<text>怎样升级?</text>
				</view>
			</view>

			<!-- 分页控件 -->
			<view class="pagination">
				<text class="page-btn" @click="goFirstPage">第一页</text>
				<text class="page-btn" @click="goPrevPage">上一页</text>
				<text class="page-btn" @click="goNextPage">下一页</text>
				<text class="page-btn" @click="goLastPage">尾页</text>
				<text class="page-text">跳到:</text>
				<input class="page-input" type="number" v-model="jumpPage" />
				<text class="page-text">页</text>
			</view>

			<!-- 留言输入区域 -->
			<view class="message-section">
				<view class="section-title">留名留言:</view>
				<view class="input-group">
					<text class="input-label">网名</text>
					<input class="name-input" type="text" v-model="userName" placeholder="请输入网名" />
				</view>
				<view class="input-group">
					<text class="input-label">留言内容</text>
					<textarea class="message-textarea" v-model="messageContent" placeholder="请输入留言内容" maxlength="300"></textarea>
					<text class="char-count">{{ messageContent.length }}/300字以内</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部提交区域 -->
		<view class="footer">
			<button class="submit-btn" @click="submitMessage">提交</button>
			<view class="footer-tips">
				<text class="tip-text">纪念馆地，爱墓留言请慎重填写信息！</text>
				<text class="warning-text">公安网警提醒：切勿发布违法信息！</text>
			</view>
			<view class="footer-links">
				<text class="link-text">保护隐私为原则</text>
				<text class="link-text">天堂网 | 创建纪念馆 | 天堂贵宾 | 客服中心</text>
				<text class="link-text">天堂网 网上纪念馆 手机版</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import portraitImage1 from '../../static/detail_image_fllower.png'	// 替换为献花图标 URL
import portraitImage2 from '../../static/detail_image.gif'	// 替换为点烛图标 URL
import portraitImage3 from '../../static/detail_image.png'	// 替换为上香图标 URL
import portraitImage4 from '../../static/detail_image_shop.png'	// 替换为献供图标 URL
import portraitImage5 from '../../static/detail_image_audio.png'	// 替换为献歌图标 URL
// 响应式数据
const activeTab = ref(0);
const activeSubCat = ref(0);
const userName = ref('');
const messageContent = ref('');
const jumpPage = ref(1);

// 分类标签
const categoryTabs = ['献花', '献供', '点烛', '上香', '敬酒', '节日条品', '礼拜', '献歌'];

// 子分类
const subCategories = ['鲜花礼物', '花圈花篮'];

// 鲜花列表
const flowerList = reactive([
	{ id: 1, name: '百合花束', image: '' },
	{ id: 2, name: '鲜花花束', image: '' },
	{ id: 3, name: '黄玫瑰', image: '' },
	{ id: 4, name: '深红玫瑰束', image: '' },
	{ id: 5, name: '白玫瑰', image: '' },
	{ id: 6, name: '粉百合', image: '' },
	{ id: 7, name: '怀念之花', image: '' },
	{ id: 8, name: '玫瑰花束', image: '' },
	{ id: 9, name: '水仙花束', image: '' },
	{ id: 10, name: '紫菊花篮', image: '' },
	{ id: 11, name: '心型玫瑰', image: '' },
	{ id: 12, name: '心型玫瑰', image: '' },
	{ id: 13, name: '红玫瑰', image: '' },
	{ id: 14, name: '康乃馨', image: '' },
	{ id: 15, name: '桔花', image: '' },
	{ id: 16, name: '心心相印', image: '' }
]);

// 升级专用物品
const upgradeItems = reactive([
	{ id: 1, name: '水仙花束', image: '' },
	{ id: 2, name: '紫菊花篮', image: '' },
	{ id: 3, name: '心型玫瑰', image: '' },
	{ id: 4, name: '心型玫瑰', image: '' }
]);

// 方法
const goBack = () => {
	uni.navigateBack();
};

const switchTab = (index: number) => {
	activeTab.value = index;
};

const switchSubCat = (index: number) => {
	activeSubCat.value = index;
};

const selectFlower = (flower: any) => {
	console.log('选择鲜花:', flower);
};

const selectUpgrade = (item: any) => {
	console.log('选择升级物品:', item);
};

const goFirstPage = () => {
	console.log('跳转到第一页');
};

const goPrevPage = () => {
	console.log('上一页');
};

const goNextPage = () => {
	console.log('下一页');
};

const goLastPage = () => {
	console.log('最后一页');
};

const submitMessage = () => {
	if (!userName.value.trim()) {
		uni.showToast({
			title: '请输入网名',
			icon: 'none'
		});
		return;
	}

	if (!messageContent.value.trim()) {
		uni.showToast({
			title: '请输入留言内容',
			icon: 'none'
		});
		return;
	}

	console.log('提交留言:', {
		userName: userName.value,
		message: messageContent.value
	});

	uni.showToast({
		title: '提交成功',
		icon: 'success'
	});
};
</script>

<style lang="less" scoped>
.festivals-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #fff;
	border-bottom: 1px solid #e0e0e0;
	position: sticky;
	top: 0;
	z-index: 100;

	.header-left {
		display: flex;
		align-items: center;
		gap: 10px;

		.header-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
		}
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 15px;

		.edit-btn {
			font-size: 14px;
			color: #666;
		}
	}
}

/* 分类导航栏 */
.category-tabs {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #e0e0e0;
	overflow-x: auto;
	white-space: nowrap;

	.tab-item {
		flex-shrink: 0;
		padding: 12px 16px;
		font-size: 14px;
		color: #666;
		border-bottom: 2px solid transparent;
		cursor: pointer;

		&.active {
			color: #d4237a;
			border-bottom-color: #d4237a;
		}
	}
}

/* 主要内容区域 */
.main-content {
	flex: 1;
	padding: 15px;
}

/* 鲜花选择区域 */
.flower-section {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.sub-categories {
		display: flex;
		gap: 20px;
		margin-bottom: 20px;

		.sub-cat-item {
			padding: 8px 16px;
			background-color: #f8f8f8;
			border-radius: 20px;
			font-size: 14px;
			color: #666;
			cursor: pointer;

			&.active {
				background-color: #d4237a;
				color: #fff;
			}
		}
	}

	.flower-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;

		.flower-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			.flower-image {
				width: 60px;
				height: 60px;
				border-radius: 8px;
				background-color: #f0f0f0;
				margin-bottom: 8px;
			}

			.flower-name {
				font-size: 12px;
				color: #333;
				text-align: center;
				line-height: 1.2;
			}
		}
	}
}

/* 升级专用区域 */
.upgrade-section {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.upgrade-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		margin-bottom: 10px;

		.upgrade-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			.upgrade-image {
				width: 60px;
				height: 60px;
				border-radius: 8px;
				background-color: #f0f0f0;
				margin-bottom: 8px;
			}

			.upgrade-name {
				font-size: 12px;
				color: #333;
				text-align: center;
				line-height: 1.2;
			}
		}
	}

	.upgrade-tip {
		text-align: right;

		text {
			font-size: 12px;
			color: #666;
			text-decoration: underline;
		}
	}
}

/* 分页控件 */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px;
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 15px;

	.page-btn {
		padding: 6px 12px;
		background-color: #f8f8f8;
		border-radius: 4px;
		font-size: 12px;
		color: #666;
		cursor: pointer;

		&:hover {
			background-color: #e8e8e8;
		}
	}

	.page-text {
		font-size: 12px;
		color: #666;
	}

	.page-input {
		width: 40px;
		height: 24px;
		border: 1px solid #ddd;
		border-radius: 4px;
		text-align: center;
		font-size: 12px;
	}
}

/* 留言输入区域 */
.message-section {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.input-group {
		margin-bottom: 15px;

		.input-label {
			display: block;
			font-size: 14px;
			color: #333;
			margin-bottom: 8px;
		}

		.name-input {
			width: 100%;
			height: 40px;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 0 12px;
			font-size: 14px;
			box-sizing: border-box;
		}

		.message-textarea {
			width: 100%;
			min-height: 80px;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 12px;
			font-size: 14px;
			resize: vertical;
			box-sizing: border-box;
		}

		.char-count {
			display: block;
			text-align: right;
			font-size: 12px;
			color: #999;
			margin-top: 5px;
		}
	}
}

/* 底部提交区域 */
.footer {
	background-color: #fff;
	padding: 15px;
	border-top: 1px solid #e0e0e0;

	.submit-btn {
		width: 100%;
		height: 44px;
		background-color: #d4237a;
		color: #fff;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 15px;
		cursor: pointer;

		&:hover {
			background-color: #c01e6b;
		}
	}

	.footer-tips {
		text-align: center;
		margin-bottom: 10px;

		.tip-text {
			display: block;
			font-size: 12px;
			color: #666;
			margin-bottom: 5px;
		}

		.warning-text {
			display: block;
			font-size: 12px;
			color: #ff6b6b;
		}
	}

	.footer-links {
		text-align: center;

		.link-text {
			display: block;
			font-size: 11px;
			color: #999;
			margin-bottom: 3px;
			line-height: 1.4;
		}
	}
}

/* 响应式设计 */
@media (max-width: 375px) {
	.flower-grid,
	.upgrade-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.flower-item .flower-image,
	.upgrade-item .upgrade-image {
		width: 50px;
		height: 50px;
	}
}

@media (min-width: 414px) {
	.flower-grid,
	.upgrade-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}
</style>
